<template>
  <div class="file-item">
    <el-tooltip :open-delay="800" class="item" placement="top" effect="dark">
      <div slot="content" class="tip-content">
        <div class="tip-left">
          <div class="name" @click="downloadFile(item.url, item.name, true)">文件名：{{ item.name }}</div>
          <div v-if="item.time" class="time">上传时间：{{ item.time | format('YYYY-MM-DD HH:mm:ss') }}</div>
        </div>
        <span class="tip-right" @click="downloadFile(item.url, item.name, true)">下载</span>
      </div>
      <div class="name" @click="downloadFile(item.url, item.name)">{{ item.name }}</div>
    </el-tooltip>
    <div v-if="!isEdit && (isExcel(item.name) || isPdf(item.name))" class="button-text" style="margin-left:5px;" @click="downloadFile(item.url, item.name, true)">下载</div>
    <img v-if="isEdit" :src="SuccessIcon" alt="" class="icon-img complete-icon">
    <i v-if="isEdit" class="icon el-icon-close" @click="removeFile(item)" />
  </div>
</template>

<script>
import { format } from '@/filters/date';
import * as dd from 'dingtalk-jsapi';
import { getExplorer } from '@/utils/tools';
import { downloadFile, openNewWindow } from '@/utils';
import SuccessIcon from '@/assets/uploadIcon/success.png';

export default {
  filters: { format },
  props: {
    item: {
      type: Object,
      default: () => {}
    },
    // 是否可以点击
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      SuccessIcon
    };
  },
  methods: {
    downloadFile(url, name, download = false) {
      if (download) {
        this.dinkDownload(url, name);
        return;
      }
      if (this.isImg(name)) {
        if (this.isDingTalk()) {
          dd.biz.util.previewImage({
            urls: [url], // 图片地址列表
            current: url, // 当前显示的图片链接
            onFail: function(err) {
              // 调用失败时回调
              window.open(url);
              console.log(err);
            }
          });
        } else {
          window.open(url);
        }
      } else if (this.isExcel(name)) {
        this.viewExcel(url, name);
      } else {
        this.dinkDownload(url, name);
      }
    },
    viewExcel(url, name) {
      try {
        // const hangzi = /[\u4e00-\u9fa5]+/g;
        // name = name.replace(hangzi, 'a');
        const timestamp = (new Date()).valueOf();
        const random = Math.ceil(Math.random() * 10);
        const lists = name.split('.');
        const fileName = `${timestamp}${random}.` + lists[lists.length - 1];
        const previewUrl = `${url}#&fullfilename=${fileName}`;
        const officeUrl = 'http://fileview.feibo.com/onlinePreview?url=' + encodeURIComponent(btoa(previewUrl));
        // window.open(officeUrl, '_blank');
        openNewWindow(officeUrl);
        // window.location.href = officeUrl;
      } catch (error) {
        console.log(error);
        this.dinkDownload(url, name);
      }
    },

    isDingTalk() {
      const currentExplorer = getExplorer() || window.navigator.userAgent;
      return currentExplorer === 'DingTalk';
    },
    dinkDownload(url, name) {
      if (this.isDingTalk()) {
        // const openUrl = `${window.location.origin}/#/download?fileUrl=${url}&fileName=${name}`;
        dd.biz.util.openLink({
          url: url + '?attname=' + name, // 要打开链接的地址
          onSuccess: function(result) {
            /**/
          }
        });
        // window.open(openUrl, '_blank');
      } else {
        downloadFile(url, name);
        this.$emit('downloadSuccess', name);
      }
    },
    isImg(name) {
      const reg = /(\.(gif|png|jpg|jpeg|webp|bmp|tif))$/i;
      return reg.test(name);
    },
    isPdf(name) {
      const excel = /(\.(pdf))$/i;
      return excel.test(name);
    },
    isExcel(name) {
      const excel = /(\.(doc|docx|xls|xlsx|xlsm|ppt|pptx|txt))$/i;
      return excel.test(name);
    },
    removeFile(item) {
      this.$emit('removeFile', item, item._index);
    }
  }
};
</script>
<style lang="scss" scoped>
.tip-content{
  max-width: 220px;
  display: flex;
  .tip-left{
    .name{
      margin-bottom: 6px;
      cursor: pointer;
      word-break: break-all;
    }
    .time{
      white-space: nowrap;
    }
  }
  .tip-right{
    white-space: nowrap;
    color: #406EFF;
    margin-left: 8px;
    cursor: pointer;
  }
}
.file-item {
  align-items: center;
  display: flex;
  cursor: pointer;
  padding: 0 5px;
  border-radius: 3px;
  margin-bottom: 3px;
  align-items: center;
  line-height: 1.4;
  &.disabled {
    cursor: not-allowed;
  }
  .el-icon-paperclip {
    font-size: 14px;
    margin-right: 5px;
    color: #909399;
  }
  .complete-icon {
    font-size: 14px;
    &.el-icon-circle-close {
      color: red;
    }
    &.el-icon-circle-check {
      color: #67c23a;
    }
  }
  .error-text {
    color: #406EFF;
    cursor: pointer;
    font-size: 14px;
    margin-right: 5px;
    margin-left: 5px;
  }
  .icon {
    font-size: 14px;
    color: #999;
    cursor: pointer;
    display: none;
  }
  .name {
    font-size: 13px;
    color: #333;
    flex:1;
    // line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 0;
    &:hover {
      color: #406EFF;
    }
  }
  &:hover {
    background-color: #f5f7fa;
    .icon {
      display: block;
    }
    .complete-icon {
      display: none;
    }
  }
}

.icon-img {
  width: 12px;
}
</style>
